<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 800px;
            margin: 0 auto;
        }

        .box,
        #box {
            width: 800px;
            border: 2px solid gainsboro;
            position: relative;
            top: 0;
            padding: 10px;

        }

        .check,
        p,
        span,
        .num,
        .add,
        .minus {
            left: 0;
            top: 0;
            display: inline-block;
        }

        img {
            width: 82px;
            height: 82px;
            display: inline-block;
        }

        p {
            margin: 0 40px;
            color: #999999;
        }

        .price {
            vertical-align: middle;
            margin: 0 40px;
            font-size: 20px;
            color: red;
        }

        .num {
            width: 20px;
            height: 20px;
            border: 1px solid;
            line-height: 15px;
            text-align: center;
            margin-left: 40px;
            background-color: honeydew;
        }

        #selecteAll,
        #dele,
        #move,
        #product,
        #proNum,
        #textP,
        #totalPri {
            display: inline-block;
            color: #666666;
            font-size: 16px;
            margin: 15px;


        }

        #proNum,
        #totalPri,
        #textP {
            margin: 15px 0px;

        }

        #product {
            margin-right: 0px;
            border: 1px solid gray;
            border-radius: 15px;
            background-color: honeydew;
        }

        #accounts {
            display: block;
            float: right;
            margin-top: 40px;
            border: 1px solid gray;
            border-radius: 15px;
            background-color: honeydew;
        }

        #box::after {
            content: "";
            display: block;
            clear: both;

        }

        #over {
            margin-left: 30px;
        }
    </style>
</head>

<body style="background-color: #f5f1f1">
    <div class="wrap">
                <div id="box">
                        <input type="checkbox" id="selecteAll">全选
                        <span id="dele">删除选中商品</span>
                        <span id="move">移动到我的关注</span>
                        <span id="product">一共选中</span>
                        <span id="proNum">件商品</span>
                        <span id="textP">,总价格为(不含运费)$</span>
                        <span id="totalPri">元</span>
                        <input type="button" value="结算" id="over">
                    </div>
         
    </div>

</body>
<script>
    //获取变量
    var wrap = document.querySelector(".wrap");
    var box = document.querySelector(".box");
    var img = document.querySelector("img");



    // for循环生成下面产品
    for (var i = 1; i < 2; i++) {
        list();
        // 调用函数
    }
    // 创建列表函数
    function list() {
        var count = 0;
        // 创建大盒子
        var box = document.createElement("div");
        box.className = "box";
        // 创建勾选
        var check = document.createElement("input");
        check.className = "check";
        // 为选框设置点击事件
        check.onclick = function () {
            if (check.checked == true) {
                count = 1;
                num.innerHTML = count;
            } else {
                count = 0;
                num.innerHTML = count;
            }
        }
        // 设置type类型
        check.setAttribute("type", "checkbox");
        // 创建图片
        var imgs = document.createElement("img");
        imgs.src = "../img/" + 'phonr' + ".png";
        // 创建文本
        var text = document.createElement("p");
        text.innerHTML = "锤子认证手机";
        // 创建价格
        var price = document.createElement("span");
        price.innerHTML = "2599.00"
        price.className = "price";
        // 创建数量
        var num = document.createElement("div");
        num.className = "num";
        num.innerHTML = count;
        // 创建+按钮
        var add = document.createElement("input");
        add.setAttribute("type", "button");
        add.className = "add";
        add.value = "+";
        // 在每次生成的box中调用add点击事件
        add.onclick = function () {
            // 当点击add时check会选中
            check.checked = true;
            count += 1;
            console.log(count);
            num.innerHTML = count;
        }
        // 创建-按钮
        var minus = document.createElement("input");
        minus.setAttribute("type", "button");
        minus.className = "minus"
        minus.value = "-";
        // 在每次生成的box中调用minus的点击事件
        minus.onclick = function () {
            if (count > 0) {
                count--;
                console.log(count);
                num.innerHTML = count;

            } else {
                check.checked = false;
                count = 0;
                num.innerHTML = count;
                console.log(count);
            }
        }
        // 将所有创建标签写入wrap中
        wrap.appendChild(box);
        box.appendChild(check);
        box.appendChild(imgs);
        box.appendChild(text);
        box.appendChild(price);
        box.appendChild(num);
        box.appendChild(add);
        box.appendChild(minus);
    }
    // 结算行设置
    // 获取变量
    var chek = document.querySelectorAll(".check");
    var number = document.querySelectorAll(".num");
    var pri = document.querySelectorAll(".price");
    // 点击全选
    selecteAll.onclick = function () {
        if (selecteAll.checked) {
            for (var i = 0; i < chek.length; i++) {
                var count = 0;
                chek[i].checked = true;
                count = 1;
                number[i].innerHTML = count;
            }
        }
    }
    // 点击删除
    dele.onclick = function () {
        for (var i = 0; i < chek.length; i++) {
            var count = 0
            number[i].innerHTML = count;
            chek[i].checked = false;
            selecteAll.checked = false;
        }
    }
    // 点击结算
    over.onclick = function () {
        var proNums = 0;
        var total = 0;
        console.log(111);
        for (var i = 0; i < 1; i++) {
            // console.log(111);
            console.log(chek[i]);
            if (chek[i].checked) {
                // 数量
                console.log(111);
                console.log(number[i].innerHTML);
                proNums += Number(number[i].innerHTML);
                total += Number(pri[i].innerHTML) * Number(number[i].innerHTML);
            }
        }
        proNum.innerHTML = proNums + "件商品";
        totalPri.innerHTML = total + "元";
    }
</script>
</body>

</html>